<template>
    <div>
        <BackHeader :title="title"></BackHeader>
        <!-- <div class="mainbox">
            <ul class="notelist">
                <li v-for="(item, index) in notelist" :key="index" @click="gopage('/notedetails')">
                    <div class="booknote">
                        <img :src="item.img">
                        <div>
                            <p class="bookname">{{ item.book }}</p>
                            <p class="noteauthor">{{ item.author }}</p>
                            <p class="cjtime">添加时间：{{ item.time }}</p>
                        </div>
                    </div>
                    <div class="notenum">
                        <span>{{ item.num }}</span><img
                            src="https://cdn7.axureshop.com/demo/1182587/images/%E7%AC%94%E8%AE%B0/u5153.png" alt="">
                    </div>
                </li>
            </ul>
        </div> -->
        <router-view></router-view>
    </div>

</template>

<script>
import BackHeader from '@/components/mycomponents_jk/BackHeader.vue';
export default {
    name: 'NotesView',
    components: {
        BackHeader
    },
    data() {
        return {
            title: "笔记",
            notelist: [
                {
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%AC%94%E8%AE%B0/%E4%B9%A6%E7%B1%8D%E5%B0%81%E9%9D%A2_u5148.png",
                    book: "也许，你该找个人聊聊",
                    author: "余华",
                    time: "2021-09-05",
                    num: 1
                },
                {
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%AC%94%E8%AE%B0/%E4%B9%A6%E7%B1%8D%E5%B0%81%E9%9D%A2_u5156.jpg",
                    book: "红楼梦",
                    author: "余华",
                    time: "2022-09-06",
                    num: 1
                },
                {
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%AC%94%E8%AE%B0/%E4%B9%A6%E7%B1%8D%E5%B0%81%E9%9D%A2_u5164.jpg",
                    book: "错乱",
                    author: "余华",
                    time: "2022-11-05",
                    num: 1
                }
            ]
        };
    },

    mounted() {

    },

    methods: {
        // 跳转页面
        gopage(url) {
            this.$router.push({
                path: url
            })
        }
    },
};
</script>

<style lang="less" scoped>
.mainbox {
    width: 100%;
    margin-top: 5rem;
    padding: 0 2rem;

    .notelist {
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 0.1rem solid #dbdbdb;

            .booknote {
                width: 100%;
                height: 7rem;
                display: flex;

                img {
                    width: 5.4rem;
                    height: 100%;
                    margin-right: 1rem;
                }

                .bookname {
                    font-size: 1.4rem;
                    color: #333333;
                }

                .noteauthor {
                    color: #999999;
                    font-size: 1.2rem;
                    line-height: 2.4rem;
                }

                .cjtime {
                    color: #999999;
                    font-size: 1.2rem;
                    margin-top: 1rem;
                }
            }

            .notenum {
                color: #999999;
                font-size: 1.2rem;
                display: flex;
                align-items: center;

                img {
                    width: 0.8rem;
                    height: 1.3rem;
                    transform: rotate(180deg);
                    margin-left: 0.8rem;
                }
            }
        }

        li:last-child {
            border: 0;
        }
    }
}
</style>